<script setup lang="ts">
import { reactive, ref } from "vue";
import MatchTable from "./MatchTable.vue";
const props = withDefaults(
  defineProps<{
    drawerVisible?: boolean;
  }>(),
  {
    drawerVisible: false
  }
);
const button_props = reactive({
  btnNames: "标识配置映射表"
});
const drawer_props = reactive({
  title: "数据标识配置映射表"
});

const drawerVisible = ref(false);
const tableDatas = reactive([
  {
    colInfo: [
      { labelName: "企业名称", dataProps: ["name"] },
      { labelName: "企业节点标识前缀", dataProps: ["node_id"] }
    ],
    tableData: [
      {
        name: "浪潮",
        node_id: "MA.10000.900000.00000003"
      },
      {
        name: "致景",
        node_id: "MA.10000.900000.00000019"
      }
    ]
  },
  {
    colInfo: [
      { labelName: "企业名称", dataProps: ["sceneCode"] },
      {
        labelName: "支持数字1-9，字母a-z，最多61种编码",
        dataProps: ["introduction"]
      }
    ],
    tableData: [
      {
        sceneCode: "1",
        introduction:
          "浪潮基于协同研发的产品个性化定制场景、济南浪潮智能终端生产基地"
      },
      {
        sceneCode: "2",
        introduction:
          "浪潮基于协同研发的产品个性化定制场景、济南浪潮智能终端生产基地"
      },
      {
        sceneCode: "3",
        introduction:
          "致景基于云边协同的产品质量检测场景，四川宜宾致景纺织智造园"
      }
    ]
  },
  {
    colInfo: [
      { labelName: "边缘网关编码（2位）", dataProps: ["gateCode"] },
      {
        labelName:
          "支持01-99，最多99个边缘网关采集点，如需拓展，可使用字母a-z，A-Z拓展",
        dataProps: ["introduction"]
      }
    ],
    tableData: [
      {
        gateCode: "1",
        introduction: "产线1区采集点"
      },
      {
        gateCode: "2",
        introduction: "产线2区采集点"
      },
      {
        gateCode: "3",
        introduction: "..."
      }
    ]
  },
  {
    colInfo: [
      { labelName: "设备ID编码（8位）", dataProps: ["devCode"] },
      {
        labelName: "设备ID自增表，当设备查询无结果时自动添加",
        dataProps: ["introduction"]
      }
    ],
    tableData: [
      {
        devCode: "00000001",
        introduction: "e_af01c45020934134a5e2b123bd3ea0c1"
      },
      {
        devCode: "00000002",
        introduction: "e_42284b93dfdf42eb9c58b00670845f2b"
      },
      {
        devCode: "00000003",
        introduction: "..."
      }
    ]
  },
  {
    colInfo: [
      { labelName: "数据类型编码（1位）", dataProps: ["id", "state"] },
      {
        labelName: "支持数字1-9，字母a-z，A-Z，最多61种编码",
        dataProps: ["type1_num", "type1_name", "type2_num", "type2_name"]
      }
    ],
    tableData: [
      {
        id: "1",
        state: "设备状态数据",
        type1_num: "2",
        type1_name: "图片",
        type2_num: "3",
        type2_name: "音频"
      },
      {
        id: "4",
        state: "设备状态数据",
        type1_num: "2",
        type1_name: "视频",
        type2_num: "6",
        type2_name: "..."
      }
    ]
  }
]);
</script>

<template>
  <el-button type="primary" class="form-btn1" @click="drawerVisible = true">
    {{ button_props.btnNames }}
  </el-button>
  <!-- 这个div用来改el-drawer的样式，不要删 -->
  <div>
    <el-drawer v-model="drawerVisible" :with-header="true" :size="816">
      <!-- 标题 -->
      <template v-slot:header>
        <div class="custom-header">
          <span>{{ drawer_props.title }}</span>
        </div>
      </template>
      <!-- 编辑按钮 -->
      <MatchTable
        v-for="item in tableDatas"
        :colInfo="item.colInfo"
        :tableData="item.tableData"
      />
    </el-drawer>
  </div>
</template>
<style lang="scss" scoped>
:deep(.el-drawer__header) {
  margin-bottom: 0px !important;
  height: 80px !important;
  border-bottom: 1px solid #ccc !important;
}
:deep(.el-drawer__body) {
  padding-top: 0;
}
.button-edit {
  width: 56px;
  margin-left: auto;
  margin-top: 20px;
}
.form_btn1 {
  background-color: #0c78e1;
  margin-left: auto;
}
.custom-header {
  background-color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  height: 50px; /* 设置标题栏的高度 */
  line-height: 50px; /* 根据需要设置垂直居中 */
}
</style>
